<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div>
        <Card>
            <Row :gutter="[11, 11]">
                <Col
                    :md="{ span: 24 }"
                    :xs="{ span: 24 }"
                    :lg="{ span: 24 }"
                >
                    <TextArea
                        v-model:value="text"
                        :rows="4"
                        placeholder="请输入你需要拷贝的内容"
                        block
                    ></TextArea>
                </Col>
                <Col
                    :md="{ span: 24 }"
                    :xs="{ span: 24 }"
                    :lg="{ span: 6 }"
                >
                    <Button block @click="ClipbroadCopy">Copy</Button>
                </Col>
                <Col
                    :md="{ span: 24 }"
                    :xs="{ span: 24 }"
                    :lg="{ span: 6 }"
                >
                    <Button block @click="onReasize">重置</Button>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Card, Button, Input, Col, Row } from 'ant-design-vue'
import { ClipboardData } from '@/hooks/useCopy'

export default defineComponent({
    name: 'Varify',
    components: {
        Card,
        Button,
        TextArea: Input.TextArea,
        Col,
        Row,
    },
    setup() {
        let text = ref()
        text.value = ''
        const ClipbroadCopy = () => {
            ClipboardData(text.value)
        }
        const onReasize = () => {
            text.value = ''
        }
        return {
            ClipbroadCopy,
            onReasize,
            text,
        }
    },
})
</script>

<style lang="less" scoped>
.copys {
  display: flex;
  align-items: center;
  .btns {
    margin-left: 1rem;
    display: inline-block;
    &:nth-of-type(1) {
      width: 80%;
    }
  }
}
</style>
